<template>
  <div class="body">
    <!-- 列表框 -->
    <div class="tables">
      <div class="tableli">
        <div class="checked">
          <el-checkbox v-model="checkedall">全选</el-checkbox>
        </div>
        <ul class="Uli">
          <li>商品信息</li>
          <li>商品属性</li>
          <li>单价</li>
          <li>数量</li>
          <li>金额</li>
          <li>操作</li>
        </ul>
      </div>
    </div>

    <!-- 商品列表 -->
    <div class="cart-goods" v-for="brand in goods" :key="brand.id">
      <div class="checkShop">{{ brand.shop }}</div>
      <div class="goods" v-for="item in brand.commodity" :key="item.id">
        <div class="checkGoods">
          <input
            type="checkbox"
            v-model="checkgoods"
            :value="item"
            name="pct"
          />
          <!-- <el-checkbox :label="item"></el-checkbox> -->
        </div>
        <div class="list">
          <div class="image">
            <el-image :src="item.src" style="width: 110px; height: 100px">
            </el-image>
          </div>
          <div class="details">
            <el-link href="/" :underline="false">{{ item.details }}</el-link>
          </div>
          <div class="property">
            <el-link href="/" :underline="false">{{ item.property }}</el-link>
          </div>
        </div>
        <div class="right">
          <div class="price">
            ￥<span>{{ item.price }}</span>
          </div>
          <div class="amount">
            <el-input-number
              v-model="item.num"
              size="mini"
              @click="handleAmount"
              :min="1"
              label="描述文字"
            ></el-input-number>
          </div>
          <div class="money">
            <span>{{ (item.num * item.price) | getmoney }}</span>
          </div>
          <div class="delet">
            <el-link :underline="false" @click="handleDeleted">删除</el-link>
          </div>
        </div>
      </div>
    </div>

    <!-- 结算 -->
    <div class="cart-floatbar">
      <div class="floatbar-left">
        <div class="checkAll">
          <el-checkbox v-model="checkedall">全选</el-checkbox>
        </div>
        <div class="floatbarDelete">
          <el-link :underline="false" @click="deletedCheck"
            >删除选中商品</el-link
          >
        </div>
      </div>
      <div class="floatbar-right">
        <div class="amountSum">
          <span>已选{{ totalamount }}件商品</span>
        </div>
        <div class="moneySum">
          合计：
          <div class="moneys">{{ totalmoney | getmoney }}</div>
        </div>
        <el-button
          type="text"
          class="submit"
          style="color: #fff"
          @click="submitClose"
          >结算</el-button
        >
      </div>
    </div>
  </div>
</template>

<script>
import { getShopCartList } from '../../api/shopCart'
import { url } from '../../utils/request'
export default {
  computed: {
    checkedall: {
      get () {
        let length = 0
        this.goods.forEach((item) => {
          length += item.commodity.length
        })
        console.log(length)
        return this.checkgoods.length === length
      },
      set (isAll) {
        if (isAll) {
          let commoditys = []
          this.goods.forEach((item) => {
            console.log(item.commodity)
            commoditys = commoditys.concat(item.commodity)
          })
          // console.log(arr)
          this.checkgoods = commoditys
        } else {
          this.checkgoods = []
        }
      }
    },
    // 总价
    totalmoney () {
      let moneySum = 0
      for (let i = 0; i < this.checkgoods.length; i++) {
        moneySum += this.checkgoods[i].price * this.checkgoods[i].num
      }
      return moneySum
    },
    // 总数
    totalamount () {
      let amountSum = 0
      for (let i = 0; i < this.checkgoods.length; i++) {
        amountSum += this.checkgoods[i].num
      }
      return amountSum
    }
  },
  data () {
    return {
      checkgoods: [],
      goods: []
    }
  },
  mounted () {
    // 获取购物车商品列表
    getShopCartList().then((res) => {
      res.data.forEach((product, index) => {
        var good = {
          id: 0,
          shop: '优优购物车',
          commodity: []
        }

        good.id = product.commodityId

        good.commodity.push({
          id: product.commodityId,
          src: `${url}/uploadfiles/${product.coverPictrue.split(' ')[0]}`,
          details: product.productName,
          property: product.commodityProductValueStr,
          price: product.price,
          num: 1,
          money: product.price
        })
        this.goods.push(good)
      })

      console.log(res)
    })
  },
  filters: {
    getmoney (val) {
      return '￥' + val.toFixed(2)
    }
  },
  methods: {
    // 数量计数器
    handleAmount (value) {
      console.log(value)
    },
    // 删除商品
    handleDeleted () {
      this.$confirm('抱歉，此功能待开发中', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
    },
    // 删除选中商品
    deletedCheck () {
      this.$confirm('抱歉，此功能待开发中', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
    },
    // 清除
    handleClear (value) {
      console.log(value)
    },
    // 结算
    submitClose () {
      this.$router.push('/order')
    }
  }
}
</script>

<style lang="scss" scoped>
// .body {
//   border: 1px solid;
//   // width: 990px;
// }
.tables {
  display: flex;
  //   border: 1px solid;
  background-color: #f3f3f3;
  .tableli {
    display: flex;
    line-height: 40px;
    .checked {
      margin-left: 12px;
      text-align: center;
    }
    .Uli {
      display: flex;
      list-style: none;
      margin-left: 120px;
      text-align: center;
    }
    .Uli li {
      width: 100px;
      margin-right: 50px;
    }
    .Uli li:nth-child(-n + 2) {
      width: 170px;
      margin-right: 45px;
    }
  }
}
</style>

<style lang="scss" scoped>
.cart-goods {
  // border: 1px solid;
  margin-bottom: 20px;
  .el-link:hover {
    color: #e2231a;
  }
  .checkShop {
    margin-left: 18px;
    margin-top: 5px;
  }
  .goods {
    border: 1px solid #ccc;
    display: flex;
    // position: relative;
    // justify-content: space-between;
    .checkGoods {
      text-align: center;
      margin-left: 20px;
      margin-top: 15px;
      width: 55px;
      height: 55px;
    }
    .list {
      display: flex;
      // margin-right: 100px;
      line-height: 40px;
      // width: 350px;
      .image {
        // margin-left: 30px;
        margin-top: 10px;
      }
      .details {
        width: 220px;
        text-align: center;
      }
      .property {
        width: 200px;
        // border: 1px solid;
        text-align: center;
      }
    }
    .right {
      display: flex;
      line-height: 40px;
      .price {
        width: 150px;
        text-align: center;
        // color: #e4393c;
      }
      .amount {
        width: 150px;
        text-align: center;
      }
      .money {
        width: 150px;
        text-align: center;
        color: #e4393c;
      }
      .delet {
        width: 150px;
        text-align: center;
      }
    }
  }
}
</style>

<style lang="scss" scoped>
.cart-floatbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  // border: 1px solid;
  height: 52px;
  background-color: #f2f2f2;
  .el-link:hover {
    color: #e2231a;
  }
  .floatbar-left {
    display: flex;
    .checkAll {
      display: flex;
      // height: 50px;
      line-height: 50px;
      padding-left: 20px;
    }
    .floatbarDelete {
      display: flex;
      padding-left: 20px;
    }
  }
  .floatbar-right {
    display: flex;
    .amountSum {
      width: 135px;
      text-align: center;
      padding-top: 10px;
    }
    .moneySum {
      width: 145px;
      display: flex;
      padding-top: 10px;
      text-align: center;
      .moneys {
        display: flex;
        padding-top: 1px;
        color: #e4393c;
      }
    }
    .submit {
      width: 182px;
      height: 39px;
      background-color: #e4393c;
    }
  }
}
</style>
